<template>
  <div style=" display: flex; flex-direction: column;">
    <el-form :inline="true" :model="queryForm" style="margin-top: 20px;margin-left: 20px;">
      <el-form-item label="药品">
        <el-input v-model="queryForm.name" placeholder="请输入药品名称" clearable />
      </el-form-item>
      <el-form-item label="分类">
        <el-select   clearable v-model="value" placeholder="请选择分类" style="width: 120px">
          <el-option v-for="item in categoryList" :key="item.id" :label="item.name" :value="item.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" style="width: 130px;">
        <el-select v-model="queryForm.status" placeholder="请选择" clearable>
          <el-option label="起售" value="1" />
          <el-option label="禁售" value="0" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addOrUpdate(true, null)">新增药品</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" height="555">
      <el-table-column fixed prop="name" label="药品名称" width="150" align="center" />
      <el-table-column prop="categoryId" label="分类" width="150" align="center">
        <template v-slot="{ row }">
          {{ selectCategory(row.categoryId) }}
        </template>
      </el-table-column>
      <el-table-column prop="price" label="价格/元" width="80" align="center" />
      <el-table-column prop="image" label="图片" width="100" align="center">
        <template v-slot="{ row }">
          <el-image style="width: 90px; height:80px" :src="row.image" />
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述信息" width="180" align="center" />
      <el-table-column prop="status" label="状态" width="100" align="center">
        <template v-slot="{ row }">
          <span v-if="row.status === 1">启售</span>
          <span v-else>停售</span>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="120" align="center" />
      <el-table-column prop="updateTime" label="最后操作时间" width="120" align="center" />
      <el-table-column fixed="right" label="操作" width="120">
        <template v-slot="{ row }">
          <el-popconfirm :icon="InfoFilled" @confirm="confirmEvent(row.id)" @cancel="cancelEvent" title="你确定要删除该账号吗?">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
          <el-button link type="primary" size="small" @click="addOrUpdate(false, row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="display: flex; margin-top: 20px; margin-left: 240px;">
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <DishForm ref="dishForm" :onSubmit="onSubmit"></DishForm>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { reactive } from 'vue'
const categoryList = ref([])
const value = ref()

// 获取分类列表
import { getCategories } from '@/apis/category.js'
async function getCategoryList() {
  const res = await getCategories(1)
  console.log(res.data.data)
  categoryList.value = res.data.data
}
getCategoryList()
function selectCategory(categoryId: number){
  const foundCategory = categoryList.value.find((category: any) => {
    return category.id === categoryId;
  });   
  if(foundCategory){
    return foundCategory.name;
  }
}
const queryForm = reactive({
  name: '',
  categoryId: null,
  status: null,
})

//分页
const total = ref(Number)
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(true)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value = val
  onSubmit();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value = val
  onSubmit();
}

const tableData = ref([])
import { getList } from '@/apis/dish.js'
async function getDishList() {
  const res = await getList(currentPage.value, pageSize.value)
  console.log(res)
  tableData.value = res.data.data.records
  console.log(res.data.data.total)
  total.value = res.data.data.total
}
getDishList()

//条件查询
const onSubmit = async () => {
  queryForm.categoryId = value.value
  console.log('submit!')
  const res = await getList(currentPage.value, pageSize.value, queryForm.name, queryForm.categoryId, queryForm.status)
  console.log(res.data.data.records)
  tableData.value = res.data.data.records
  total.value = res.data.data.total
}

//删除
import { InfoFilled } from '@element-plus/icons-vue'
import { deleteDish } from '@/apis/dish.js'
import { ElMessage } from 'element-plus';
const confirmEvent = async (id: null) => {
  console.log('删除!' + id)
  //删除该员工 
  const res = await deleteDish(id)
  if (res.data.code === 0) {
    ElMessage.error(res.data.msg)
  }
  //并刷新表格
  onSubmit()
}
const cancelEvent = () => {
  console.log('取消!')
}

import DishForm from './DishForm.vue'


const dishForm = ref(null)
//添加药品
function addDish() {
  dishForm.value.changeDialogVisible(true)
  console.log('添加药品!')
}
//修改员工信息
function updateDish(row: any) {
  console.log('修改药品!')
  dishForm.value.changeDialogVisible(false)
  dishForm.value.editFormData(row)
}
function addOrUpdate(isadd: boolean, row: any) {
  if (isadd) {
    console.log('添加药品!')
    addDish()
  } else {
    console.log('修改员工信息!')
    updateDish(row)
  }
}
</script>